<template>
	<view class="abslrtb flex-column a-center wrap">
		<qui-navbar title="忘记密码"></qui-navbar>
		<view class="topbox flex-column aj-center">
			<image class="logoimg" src="/static/logo.png" mode=""></image>
		</view>
		
		<view class="form">
			<view class="flex a-center form-item">
				<view class="label">
					<text>手机号</text>
				</view>
				<image class="label_icon" src="/static/images/icon_phone.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input placeholder-class="placeholder" class="qui-input" type="text" v-model="mobile" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="flex a-center form-item">
				<view class="label">
					<text>验证码</text>
				</view>
				<image class="label_icon" src="/static/images/icon_code.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input placeholder-class="placeholder" class="qui-input" type="text" v-model="code" placeholder="请输入验证码" maxlength="6" />
				</view>
				<view>
					<text v-if="getCodeTime === 0" style="opacity: 0.8;" class="fs28 ptb20 main-color yzm" @click="getCode">获取验证码</text>
					<text v-else style="font-size: 20px;color:#0A84FF">{{ getCodeTime }}s</text>
				</view>
			</view>
			<view class="flex a-center form-item">
				<view class="label">
					<text>新密码</text>
				</view>
				<image class="label_icon" src="/static/images/icon_pw.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input :password="!isPasswordVisible" placeholder-class="placeholder" class="qui-input" type="text" v-model="newPassword" placeholder="请输入新密码" />
				</view>
				<view @click="togglePasswordVisibility" style="margin-left: 10rpx;">
					<image :src="isPasswordVisible ? '/static/images/icon_eye_open.png' : '/static/images/icon_eye_close.png'" style="width: 40rpx; height: 40rpx;"></image>
				</view>
			</view>
			<view class="flex a-center form-item">
				<view class="label">
					<text>确认密码</text>
				</view>
				<image class="label_icon" src="/static/images/icon_pw.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input :password="!isPasswordVisible" placeholder-class="placeholder" class="qui-input" type="text" v-model="confirmPassword" placeholder="请确认新密码" />
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="qbtn" @click="confirmReset">
				<text class="btn-text-color fs30">确认</text>
			</view>
			<view class="flex ptb30 mlr20 aj-center">
				<view @click="goLogin()" class="">
					<text class="fs26 nav-text-color underline">返回登录</text>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const mobile = ref(''); // 手机号
const code = ref(''); // 验证码
const newPassword = ref(''); // 新密码
const confirmPassword = ref(''); // 确认密码
const isPasswordVisible = ref(false); // 密码是否可见
const getCodeTime = ref(0); // 验证码倒计时
let countdownTimer: any = null; // 倒计时定时器

// 获取验证码
const getCode = () => {
    if (!mobile.value.trim()) {
        uni.showToast({
            title: '请输入手机号',
            icon: 'none'
        })
        return;
    }
    
    // 手机号格式验证
    const mobileRegex = /^1[3-9]\d{9}$/;
    if (!mobileRegex.test(mobile.value)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        })
        return;
    }
    
    // 开始倒计时
    getCodeTime.value = 60;
    countdownTimer = setInterval(() => {
        getCodeTime.value--;
        if (getCodeTime.value <= 0) {
            clearInterval(countdownTimer);
            countdownTimer = null;
        }
    }, 1000);
    
    // 模拟发送验证码（静态演示）
    uni.showToast({
        title: '验证码已发送',
        icon: 'success'
    })
    
    console.log('发送验证码到手机:', mobile.value);
}

// 表单验证
const validateForm = () => {
    if (!mobile.value.trim()) {
        uni.showToast({
            title: '请输入手机号',
            icon: 'none'
        })
        return false;
    }
    
    const mobileRegex = /^1[3-9]\d{9}$/;
    if (!mobileRegex.test(mobile.value)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        })
        return false;
    }
    
    if (!code.value.trim()) {
        uni.showToast({
            title: '请输入验证码',
            icon: 'none'
        })
        return false;
    }
    
    if (code.value.length !== 6) {
        uni.showToast({
            title: '验证码应为6位数字',
            icon: 'none'
        })
        return false;
    }
    
    if (!newPassword.value.trim()) {
        uni.showToast({
            title: '请输入新密码',
            icon: 'none'
        })
        return false;
    }
    
    if (newPassword.value.length < 6) {
        uni.showToast({
            title: '密码长度不能少于6位',
            icon: 'none'
        })
        return false;
    }
    
    if (!confirmPassword.value.trim()) {
        uni.showToast({
            title: '请确认密码',
            icon: 'none'
        })
        return false;
    }
    
    if (newPassword.value !== confirmPassword.value) {
        uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
        })
        return false;
    }
    
    return true;
}

// 确认重置密码
const confirmReset = () => {
    if (!validateForm()) {
        return;
    }
    
    // 显示加载中
    uni.showLoading({
        title: '重置中...'
    })
    
    // 模拟重置密码请求（静态演示）
    setTimeout(() => {
        uni.hideLoading();
        
        // 重置成功
        console.log('密码重置成功:', {
            mobile: mobile.value,
            newPassword: newPassword.value
        });
        
        uni.showToast({
            title: '密码重置成功',
            icon: 'success'
        })
        
        // 延迟跳转到登录页
        setTimeout(() => {
            uni.navigateBack();
        }, 1500);
    }, 2000);
}

// 返回登录页
const goLogin = () => {
    uni.navigateBack();
}

// 切换密码可见性
const togglePasswordVisibility = () => {
    isPasswordVisible.value = !isPasswordVisible.value;
}

// 页面卸载时清理定时器
onUnmounted(() => {
    if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
    }
})
</script>

<style scoped lang="scss">
@import url("./style/qui_weex.scss");
@import url("./style/skin06.scss");
</style>